<template>
  <a-layout-header class="header">
    <div class="header-content">
      <div class="logo">
        <router-link to="/">生日愿望墙</router-link>
      </div>

      <a-menu
          v-model:selectedKeys="selectedKeys"
          mode="horizontal"
          class="nav-menu"
      >
        <a-menu-item key="home">
          <router-link to="/">
            <home-outlined />
            <span>首页</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="card">
          <router-link to="/card">
            <gift-outlined />
            <span>生日贺卡</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="wishes">
          <router-link to="/wishes">
            <message-outlined />
            <span>留言板</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="memories">
          <router-link to="/memories">
            <clock-circle-outlined />
            <span>回忆时光</span>
          </router-link>
        </a-menu-item>
      </a-menu>

      <div class="user-actions">
        <template v-if="userStore.isLoggedIn">
          <span class="welcome-text">
            <a-avatar :size="28">{{ userStore.currentUser?.userAccount?.[0] }}</a-avatar>
            <span class="username">{{ userStore.currentUser?.userAccount }}，生日快乐呀</span>
          </span>
          <a-button type="primary" danger @click="handleLogout">
            <template #icon><logout-outlined /></template>
            退出登录
          </a-button>
        </template>
        <template v-else>
          <a-button type="primary" @click="$router.push('/login')">
            <template #icon><login-outlined /></template>
            登录
          </a-button>
        </template>
      </div>
    </div>
  </a-layout-header>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import {
  HomeOutlined,
  MessageOutlined,
  GiftOutlined,
  ClockCircleOutlined,
  LogoutOutlined,
  LoginOutlined
} from '@ant-design/icons-vue'
import { Modal } from 'ant-design-vue'
import {userApi} from "../api/user.js";

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 根据当前路由设置选中的菜单项
const selectedKeys = ref([route.name])

// 监听路由变化
watch(
    () => route.name,
    (newName) => {
      selectedKeys.value = [newName]
    },
    { immediate: true }
)

// 退出登录
const handleLogout = () => {
  Modal.confirm({
    title: '确定要退出登录吗？',
    content: '退出后需要重新登录',
    okText: '确定',
    cancelText: '取消',
    async onOk() {
      try {
        await userApi.logout()
        userStore.clearUserState()
        router.push('/login')
      } catch (error) {
        console.error('退出失败:', error)
      }
    }
  })
}
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: white;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
}

.logo {
  font-size: 20px;
  font-weight: 600;
  margin-right: 48px;
}

.logo a {
  color: #ff6b81;
  text-decoration: none;
}

.nav-menu {
  flex: 1;
  line-height: 64px;
  border-bottom: none;
}

:deep(.ant-menu-horizontal) {
  border-bottom: none;
}

:deep(.ant-menu-item) {
  display: flex;
  align-items: center;
}

:deep(.ant-menu-item .anticon) {
  margin-right: 8px;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome-text {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(0, 0, 0, 0.85);
}

.username {
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 0 16px;
  }

  .logo {
    font-size: 18px;
    margin-right: 24px;
  }

  .username {
    display: none;
  }
}

@media (max-width: 576px) {
  .logo {
    display: none;
  }

  :deep(.ant-menu-item) {
    padding: 0 12px !important;
  }

  :deep(.ant-menu-item .anticon + span) {
    display: none;
  }
}
</style>